# 快速上手

在阅读本指南前，请先阅读 [设置环境](./setting-up-env)。本指南将引导你逐步学习使用 Module Federation。我们将构建两个独立的单页面应用程序 (SPA)，它们会使用 Module Federation 共享组件，下文中遇到不熟的名词请查看[名词解释](./glossary)。

## 新项目创建

Module Federation 提供了 `create-module-federation` 工具来创建项目，不需要全局安装，直接使用 npx 按需运行即可。

你可以使用 `create-module-federation` 来创建一个 Module Federation 项目，调用以下命令：

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm create module-federation@latest',
    yarn: 'yarn create module-federation',
    pnpm: 'pnpm create module-federation@latest',
  }}
/>

按照提示一步步操作即可。在创建过程中，你可以选择项目类型、角色类型等。

### 模板

在创建项目时，你可以选择 `create-module-federation` 提供的下列模板：

| 模板                      | 描述                                                         |
| ------------------------- | ------------------------------------------------------------ |
| provider-modern           | 使用 [Modern.js](https://modernjs.dev/) 的生产者             |
| provider-rsbuild          | 使用 [Rsbuild](https://rsbuild.dev/) 的生产者                |
| provider-rslib            | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者              |
| provider-rslib-storybook  | 使用 [Rslib](https://lib.rsbuild.dev/) 的生产者，并且开启了 storybook 功能 |
| consumer-modern           | 使用 [Modern.js](https://modernjs.dev/) 的消费者             |
| consumer-rsbuild          | 使用 [Rsbuild](https://rsbuild.dev/) 的消费者                |


### 快速创建

[create-module-federation](https://www.npmjs.com/package/create-module-federation) 提供了一些 CLI 选项。通过设置这些 CLI 选项，你可以跳过交互式的选择步骤，一键创建项目。

比如，一键创建名称为 provider 的 Modern.js 生产者项目到 `my-project` 目录：

```bash
npx create-module-federation --dir my-project --template provider-modern --name provider

# 使用缩写
npx create-module-federation -d my-project -t provider-modern -n provider
```

`create-module-federation` 完整的 CLI 选项如下：

```text
Usage: create-module-federation [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  -n, --name       specify the mf name
  -r, --role       specify the mf role type: provider or consumer
  --override       override files in target directory

Templates:

  provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
```

### 创建一个生产者

执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为生产者即可创建项目。

此处以创建一个 rsbuild 生产者项目为例：

```bash
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_provider
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Provider
│
◇  Next steps ─────╮
│                  │
│  cd mf_provider  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

### 创建一个消费者

执行 `create-module-federation` 命令，按照需求选择需要的框架和类型，并选择角色类型为消费者即可创建项目。

此处以创建一个 rsbuild 消费者项目为例：

```bash
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_consumer
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Consumer
│
◇  Next steps ─────╮
│                  │
│  cd mf_provider  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

#### 替换生产者

默认创建的消费者项目会消费一个已发布的生产者，如果你想替换生产者，需要在 `module-federation.config.ts` 中修改 `remotes` 配置。

```diff title="module-federation.config.ts"
import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';

export default createModuleFederationConfig({
  name: 'mf_consumer',
  remotes: {
-   'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+   'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

```

## 已有项目创建

如果你想将 `Module Federation` 集成到现有项目中，可以参考[此文档](../../practice/frameworks/overview)。

## 总结

通过上面的流程你已经基于 Module Federation 完成了一个「生产者」导出一个组件给到「消费者」使用，并在过程中初步使用和了解了：Module Fderation 插件中的 remotes、exposes、shared 的配置。

如果你希望了解如何直接在 Webpack、Rspack 构建工具上导出和消费远程模块可以参考：[Rspack Plugin](../basic/rspack)、[Webpack Plugin](../basic/webpack)

## 下一步

你可能想要：

import NextSteps from '@components/NextSteps';
import Step from '@components/Step';

<NextSteps>
  <Step
    href="/guide/start/features"
    title="功能导航"
    description="了解 Module Federation 提供的所有功能"
  />
  <Step
    href="/configure"
    title="查阅配置"
    description="了解如何配置 Module Federation"
  />
  <Step
    href="/guide/start/glossary"
    title="名词解释"
    description="了解 Module Federation 相关的概念"
  />
</NextSteps>
